跳到主要内容

动画API

打造丝滑流畅的动画效果。 animation_example_movement.gif 调用 Feature#createAnimation('position' 或 'rotation' 或 'scale') 来创建一个动画对象。调用 setKeys 来指定关键帧。第一个关键帧将在 frame: 0 处以对象当前的位置创建。

调用 feature#startAnimations 来播放一旦创建的动画。

任何正在播放的动画都将在从API启动动画时停止。

附注：不要尝试通过每秒调用 feature.position.x += 0.1 60次来实现动画效果 - 因为来自脚本宿主到世界引擎的消息将被限制在每秒5hz，导致您的“动画”将变得非常卡顿。请使用动画API，它就像涂抹黄油一样顺滑。🧈

附注：动画以本机屏幕刷新率运行（60 / 90 / 144 / 240hz），尽管我们在30fps上指定关键帧。

位置动画​

以下示例将火箭vox模型在1秒内向上移动10个voxel。

let rocket = parcel.getFeatureById('rocketvox')

let r1 = rocket.createAnimation('position')

r1.setKeys([{
  frame: 30, // 标准为30fps（表示1秒）
  value: rocket.position.add( new Vector3(0,10,0) )
}])

rocket.startAnimations( [r1] ) // 启动动画

旋转动画​

这段代码让火箭绕y轴旋转。旋转角度以弧度表示。

let r2 = rocket.createAnimation('rotation')

r2.setKeys([{
  frame: 30,
  value: rocket.rotation.add(new Vector3(0, feature.rotation.y + Math.PI / 2, 0) )
}])

rocket.startAnimations( [r2] ) // 启动动画

多个动画​

使用前面的两个示例：

rocket.startAnimations( [r1, r2] )

旋转中心​

在使用旋转动画时，您可能会注意到vox模型实际上并没有围绕其自然中心旋转。

对于一个打算旋转的vox模型，您应该将中心点放在Magicavoxel画布上的特定坐标上。对于一个32x32x32的vox模型，使用 x:20 和 y:15 作为真正的旋转中心。您可以使用此vox模型来帮助您获取真正的旋转中心。在该模型中，深蓝色voxel表示近似的旋转中心，而浅蓝色表示中心。 true_center_rotation_32x32x32.png

这种方法的一个不便之处是它会强制您缩小vox模型的尺寸。